<!DOCTYPE html>
<style>
body {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
#howManyNs {
    border: 2px solid black;
}
#constantFactorO1 {
    border: 2px solid #0f0;
}
#constantFactornlgn {
    border: 2px solid #f0f;
}
#constantFactorn2 {
    border: 2px solid #f00;
}
</style>

<title>Goofing Around With Big-O Notation</title>

<script src="chart.js"></script>
<canvas id="myChart" width="1000" height="600"></canvas>

<form>
Scale of input? <input type="text" size-"6" id="howManyNs" value="8"/>
Constant Factor for O(1): <input type="text" size="6" id="constantFactorO1" value="20"/>
Constant Factor for O(n lg n): <input type="text" size="6" id="constantFactornlgn" value="5"/>
Constant Factor for O(n<sup>2</sup>): <input type="text" size="6" id="constantFactorn2" value="1"/>
</form>

<script>
var lg = function(n) {
    return Math.log(n) / Math.LN2;
};

var doConstant = function(n) {
    var c = parseInt(document.getElementById("constantFactorO1").value);
    return c * n;
}

var doNlgN = function(n) {
    var c = parseInt(document.getElementById("constantFactornlgn").value);
    return c * n * lg(n);
};

var doNsquared = function(n) {
    var c = parseInt(document.getElementById("constantFactorn2").value);
    return c * n * n;
};

var draw = function() {
    var Ns = [];
    var scale = parseInt(document.getElementById("howManyNs").value);
    for (var i = 0; i <= scale; ++i) {
        Ns.push(Math.pow(2, i));
    }
    /*
    var Ns = [
        1,
        32,
        64,
        128,
        256,
        512,
        1024,
        2048,
        4096,
        8192,
    ];
    */

    var data = {
        labels : Ns,
        datasets : [
            {
                fillColor : "rgba(255,0,0,0.2)",
                strokeColor : "rgba(255,0,0,1)",
                pointColor : "rgba(255,0,0,1)",
                pointStrokeColor : "#fff",
                data : Ns.map(doNsquared)
            },
            {
                fillColor : "rgba(255,0,255,0.2)",
                strokeColor : "rgba(255,0,255,1)",
                pointColor : "rgba(255,0,255,1)",
                pointStrokeColor : "#fff",
                data : Ns.map(doNlgN)
            },
            {
                fillColor : "rgba(0,255,0,0.2)",
                strokeColor : "rgba(0,255,0,1)",
                pointColor : "rgba(0,255,0,1)",
                pointStrokeColor : "#fff",
                data : Ns.map(doConstant)
            },
        ]
    };

    var context = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(context).Line(data, { bezierCurve : false, });
};

var e;
e = document.getElementById("howManyNs");
e.onkeyup = draw;
e = document.getElementById("constantFactorO1");
e.onkeyup = draw;
e = document.getElementById("constantFactornlgn");
e.onkeyup = draw;
e = document.getElementById("constantFactorn2");
e.onkeyup = draw;

draw();
</script>
